import React, { Suspense } from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import PrivateRoute from '@/components/PrivateRoute'
import history from '@/utils/history'

// 导入页面组件
// import Login from '@/pages/Login'
// import Layout from '@/pages/Layout'
// import NotFound from '@/pages/NotFound'
const Login = React.lazy(() => import('./pages/Login'))
const Layout = React.lazy(() => import('./pages/Layout'))
const NotFound = React.lazy(() => import('./pages/NotFound'))

export default function App() {
  return (
    <Router history={history}>
      <div className="app">
        <Suspense fallback={<div
          style={{
            textAlign: 'center',
            marginTop: 200
          }}>loading......</div>}>
          <Switch>
            {/* 精确匹配，重定向 */}
            <Redirect from="/" to="/home" exact></Redirect>
            <Route path="/login" component={Login} ></Route>
            {/* <Route path="/home" component={Layout}></Route> */}
            <PrivateRoute path="/home">
              <Layout></Layout>
            </PrivateRoute>
            {/* 最后写404 不用写path,匹配不到就显示它*/}
            <Route component={NotFound}></Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}

